<template>
  <div class="child-component">
    <h3>子组件</h3>
    <div class="message-box">
      <p>收到父组件消息：</p>
      <div class="message-content">{{ parentMsg }}</div>
    </div>

    <div class="action-box">
      <el-input v-model="childMessage" placeholder="输入回复消息" />
      <el-button type="primary" @click="sendToParent">回复父组件</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['parentMsg'])
const emit = defineEmits(['child-event'])

const childMessage = ref('')

const sendToParent = () => {
  if (childMessage.value.trim()) {
    emit('child-event', childMessage.value)
    childMessage.value = ''
  } else {
    emit('child-event', '已收到父组件消息！')
  }
}
</script>

<style scoped>
.child-component {
  padding: 1.5rem;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.child-component h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e4e7ed;
}

.message-box {
  margin-bottom: 1.5rem;
}

.message-content {
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  font-weight: 500;
}

.action-box {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.action-box .el-input {
  flex: 1;
}
</style>